import React, { useEffect, useState } from "react";
import request from "../api/request";
import style from './index.module.css'
import {useNavigate} from 'react-router-dom'
import { Button, SearchBar } from 'antd-mobile'
function ListData() {
  const [list, setList] = useState([]);
  //获取列表数据
  const getListData = () => {
    request.get("/room/list").then((res) => {
      console.log("列表", res);
      
      const newList =res.data.data.list
      console.log(newList)
     setList(list.concat(newList))
    });
  };
  useEffect(() => {
    getListData();
  }, []);

   //去往详情页
   const navigate=useNavigate()
   const goDetail=(item)=>{
    let URL = `/detail/${item.id}`
    navigate(URL,{
        state:item //携带参数
    })
   }
     const changeSearch=(value)=>{
        console.log(value)
       
        
    }
    const search=()=>{
      ListData()
        
    }
  return (
    // 列表渲染
    <div>
          <SearchBar placeholder='请输入内容' onChange={changeSearch} />
         <Button color='primary' onClick={search}>搜索</Button>
      {list.map((item) => {
        return (
          <dl key={item.id} className={style['box']} onClick={()=>goDetail(item)}>
            <dt  className={style['left']}>
                <img src={item.url} alt="" width={150} height={150}/>
            </dt>
            <dd  className={style['left']}>
                <p  className={style['text']}>名称:{item.name}</p>
                <p className={style['text']}>描述:{item.title}</p>
                <p className={style['text']}>价格:￥{item.price}</p>
            </dd>
          </dl>
        );
      })}
    </div>
  );
}

export default ListData;
